<template>
  <div class="single-page-container">
    <div class="single-page-content">
      <!-- 筛选 -->
      <div class="filter-box">
        <div class="list">
          <div class="item" @click="handleFilter('start_time')">
            <p class="title">{{ form.start_time || '开始时间' }}</p>
            <van-icon name="arrow-down" />
          </div>
          <div class="item" @click="handleFilter('end_time')">
            <p class="title">{{ form.end_time || '结束时间' }}</p>
            <van-icon name="arrow-down" />
          </div>
          <div class="item" @click="handleFilter('run_type')">
            <p class="title">{{ form.run_type || '外呼类型' }}</p>
            <van-icon name="arrow-down" />
          </div>
          <div class="item" @click="handleFilter('user_id')">
            <p class="title">{{ form.user_id || '数据接收人' }}</p>
            <van-icon name="arrow-down" />
          </div>
          <div class="item" @click="handleFilter('follow_type2')">
            <p class="title">{{ form.user_id || '回访结果' }}</p>
            <van-icon name="arrow-down" />
          </div>
        </div>
      </div>
      <!-- 列表 -->
      <div class="list-box">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
          <div class="item" v-for="item in list" :key="item.id">
            <div class="line line1">
              <div class="title">{{ item.task_name || '--' }}</div>
              <div class="user">{{ item.user || '--' }}</div>
            </div>
            <div class="line">
              <div class="text">
                <p class="label">客户名称:</p>
                <p class="value">{{ item.contact_name || '--' }}</p>
              </div>
              <div class="text">
                <p class="label">联系方式:</p>
                <p class="value">{{ item.contact_phone || '--' }}</p>
              </div>
            </div>
            <div class="line">
              <div class="text">
                <p class="label">公司名称:</p>
                <p class="value">{{ item.company_name || '--' }}</p>
              </div>
            </div>
            <div class="line">
              <div class="text">
                <p class="label">回访状态:</p>
                <p class="value">{{ item.is_follow === 1 ? '已回访' : '未回访' }}</p>
              </div>
              <div class="text" v-if="item.is_follow === 1">
                <p class="label">回访详情:</p>
                <p class="value">{{ followTypeName(item.follow_type) }}</p>
              </div>
            </div>
            <div class="desc-box" v-if="item.is_follow === 1 && item.desc" :class="{ expand: item.expand }">
              <div class="desc" :class="{ 'show-button': item.showButton }">
                <div class="empty"></div>
                <div v-if="item.expand" class="expand-button" @click="handleExpand(item)">收起</div>
                <div v-else class="expand-button" @click="handleExpand(item)">展开</div>
                <span class="lable">备注:</span>
                {{ item.desc }}
              </div>
            </div>
            <div class="bottom" v-if="item.url">
              <div class="button" @click="handleDetail(item.url)">查看详情</div>
            </div>
          </div>
        </van-list>
      </div>
      <!-- 弹窗 时间-->
      <van-popup v-model="showPickerStartTime" position="bottom">
        <van-datetime-picker v-model="currentDateStart" type="date" @cancel="onCancelTime" @confirm="onConfirmTime" :formatter="formatter" />
      </van-popup>
      <van-popup v-model="showPickerEndTime" position="bottom">
        <van-datetime-picker v-model="currentDateEnd" type="date" @cancel="onCancelTime" @confirm="onConfirmTime" :formatter="formatter" />
      </van-popup>
      <van-popup v-model="showPicker" position="bottom">
        <van-picker show-toolbar :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
      </van-popup>
    </div>
  </div>
</template>

<script>
import { apiUserDeptShow, apiAiCountShow } from '@/api/outboundCall'
import { isMobile, formatFormData } from '@/utils/index'

export default {
  name: '',
  props: {},
  data() {
    return {
      columns: [],
      showPicker: false,
      showPickerStartTime: false,
      showPickerEndTime: false,
      currentDateStart: new Date(),
      currentDateEnd: new Date(),
      showDialog: true,
      loading: false,
      isGetting: false,
      finished: false,
      userList: [],
      list: [],
      pageSize: 10,
      pageNumber: 1,
      form: {
        start_time: '',
        end_time: '',
        run_type: '',
        user_id: '',
        follow_type2: '',
      },
      typeList: [
        { id: '', name: '全部' },
        { id: 1, name: '资产' },
        { id: 2, name: '回收' },
        { id: 3, name: '造粒厂' },
        { id: 4, name: '制品厂' },
        { id: 5, name: '智能' },
        { id: 6, name: '名录' },
      ],
      followTypeList: [
        { id: 1, name: '无法接通' },
        { id: 2, name: '无人接听' },
        { id: 3, name: '拒接' },
        { id: 4, name: '用户正忙' },
        { id: 5, name: '没有东西卖' },
        { id: 6, name: '回收' },
        { id: 7, name: '添加微信' },
        { id: 8, name: '已发资产' },
        { id: 9, name: '已发独享' },
        { id: 10, name: '重复发送' },
        { id: 11, name: '空号' },
      ],
      currentFilter: '',
      type: 1,
    }
  },
  created() {
    const search = window.location.hash.split('?')[1]
    if (!isMobile()) {
      this.$router.replace('/outCallStatisticsPc?' + (search ? search : ''))
    }
    if (this.$route.query.type) {
      this.type = parseInt(this.$route.query.type)
    }
  },
  mounted() {
    this.init()
    this.getUserList()
  },
  methods: {
    init() {
      const today = new Date()
      const todayString = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`
      this.form.start_time = this.form.end_time = todayString

      if (this.type === 2) {
        this.typeList = [{ id: 5, name: '智能' }]
        this.form.run_type = '智能'
      } else if (this.type === 3) {
        this.typeList = [{ id: 6, name: '名录' }]
        this.form.run_type = '名录'
      } else {
        this.typeList = [
          { id: 1, name: '资产' },
          { id: 2, name: '回收' },
          { id: 3, name: '造粒厂' },
          { id: 4, name: '制品厂' },
        ]
      }
    },
    // 获取人员下拉
    getUserList() {
      apiUserDeptShow(formatFormData({ t: this.type })).then((res) => {
        const { data } = res
        data.unshift({
          id: '',
          nickname: '全部',
        })
        this.userList = data
      })
    },
    // 获取列表
    getList() {
      if (this.isGetting) {
        return
      }
      this.isGetting = true
      let run_type = ''
      let user_id = ''
      let follow_type2 = ''

      if (this.form.run_type) {
        run_type = this.typeList.find((item) => {
          return item.name === this.form.run_type
        }).id
      }
      if (this.form.user_id) {
        user_id = this.userList.find((item) => {
          return item.nickname === this.form.user_id
        }).id
      }
      if (this.form.follow_type2) {
        follow_type2 = this.followTypeList.find((item) => {
          return item.name === this.form.follow_type2
        }).id
      }
      const info = {
        pageSize: this.pageSize,
        pageNumber: this.pageNumber,
        start_time: this.form.start_time,
        end_time: this.form.end_time,
        run_type,
        user_id,
        follow_type2,
      }

      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiAiCountShow(formData)
        .then((res) => {
          this.loading = false
          this.isGetting = false

          const { result } = res
          result.items.forEach((item) => {
            item.expand = false
            item.showButton = true
          })
          this.list = [...this.list, ...result.items]
          this.pageNumber++
          if (this.list.length >= result.total) {
            this.finished = true
          }
        })
        .catch(() => {
          this.loading = false
          this.finished = true
          this.isGetting = false
        })
    },
    // 筛选
    handleFilter(type) {
      this.currentFilter = type
      if (type === 'start_time') {
        this.showPickerStartTime = true
      } else if (type === 'end_time') {
        this.showPickerEndTime = true
      } else if (type === 'run_type') {
        this.columns = this.typeList.map((item) => {
          return item.name
        })
        this.showPicker = true
      } else if (type === 'user_id') {
        this.columns = this.userList.map((item) => {
          return item.nickname
        })
        this.showPicker = true
      } else if (type === 'follow_type2') {
        this.columns = this.followTypeList.map((item) => {
          return item.name
        })
        this.showPicker = true
      }
    },
    // 查看详情
    handleDetail(url) {
      location.href = url
    },
    // 取消
    onCancel() {
      this.showPicker = false
    },
    // 确认
    onConfirm(value) {
      this.form[this.currentFilter] = value
      this.showPicker = false

      this.list = []
      this.finished = false
      this.pageNumber = 1
      this.getList()
    },
    // 取消
    onCancelTime() {
      this.showPickerStartTime = this.showPickerEndTime = false
    },
    // 确认
    onConfirmTime(value) {
      const date = new Date(value)
      if (this.currentFilter === 'start_time') {
        if (new Date(this.form.end_time) < date) {
          this.$toast('开始时间不能晚于结束时间')
          return
        }
      } else {
        if (new Date(this.form.start_time) > date) {
          this.$toast('结束时间不能早于开始时间')
          return
        }
      }
      this.form[this.currentFilter] = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
      this.showPickerStartTime = this.showPickerEndTime = false

      this.list = []
      this.finished = false
      this.pageNumber = 1
      this.getList()
    },
    // 格式化
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    followTypeName(type) {
      const item = this.followTypeList.find((item) => {
        return item.id === type
      })
      if (item) {
        return item.name
      }
    },
    // 展开收起
    handleExpand(item) {
      item.expand = !item.expand
    },
  },
}
</script>

<style scoped lang="scss">
.single-page-container {
  width: 100vw;
  min-height: 100vh;
  font-size: 26rpx;
  color: #333333;
  background: #eff1f5;
}

.filter-box {
  width: 100%;
  height: 88rpx;
  background: #ffffff;
  position: fixed;
  left: 0;
  top: 0;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
  overflow: hidden;
  overflow-x: scroll;
  .list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    .item {
      width: 23%;
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      .title {
        max-width: 150rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.list-box {
  padding: 0 20rpx;
  padding-top: 110rpx;
  .item {
    width: 100%;
    background: #ffffff;
    border-radius: 12rpx;
    padding: 32rpx 24rpx 24rpx;
    margin-bottom: 16rpx;
    .line {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      .text {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin-right: 20rpx;
        .label {
          flex: 0 0 auto;
          color: #999;
          margin: 10rpx;
          margin-left: 0;
        }
        .value {
          margin: 10rpx;
          margin-left: 0;
        }
        &:last-child {
          margin: 0;
        }
      }
      .title {
        font-size: 30rpx;
        font-weight: bold;
      }
    }
    .line1 {
      justify-content: space-between;
      margin-bottom: 20rpx;
      padding-bottom: 20rpx;
      border-bottom: 1px solid #eeeeee;
    }
  }
}
.bottom {
  margin-top: 20rpx;
  border-top: 1px solid #eeeeee;
  padding-top: 20rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .button {
    padding: 20rpx;
    height: 54rpx;
    background: #368aff;
    color: #ffffff;
    border-radius: 8rpx;
    font-size: 24rpx;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.desc-box {
  display: flex;
  width: 100%;
  position: relative;
  overflow: hidden;
  .desc {
    width: 100%;
    font-size: 26rpx;
    font-weight: 400;
    color: #999999;
    line-height: 36rpx;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    &::after {
      content: '';
      width: 100%;
      height: 36rpx;
      position: absolute;
      background: #ffffff;
    }
    .empty {
      float: right;
      width: 0rpx;
      height: calc(100% - 30rpx);
    }
    .expand-button {
      display: none;
      float: right;
      clear: both;
      color: #368aff;
    }
    &.show-button {
      .expand-button {
        display: block;
      }
    }
  }
  &.expand {
    .desc {
      -webkit-line-clamp: 999;
      &::after {
        content: none;
      }
    }
  }
}
</style>
